<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
    />
    <!-- Editor -->
    <link rel="stylesheet" href="http://localhost:8080/dist/cdn/toastui-editor.css" />
    <!-- Plugin -->
    <link rel="stylesheet" href="../dist/cdn/toastui-editor-plugin-code-syntax-highlight.css" />
  </head>
  <body>
    <div class="code-html">
      <!-- Editor -->
      <h2>Editor</h2>
      <div id="editor"></div>
      <!-- Editor's Viewer -->
      <h2>Viewer</h2>
      <div id="viewer"></div>
    </div>
    <!-- Editor -->
    <script src="http://localhost:8080/dist/cdn/toastui-editor-all.js"></script>
    <!-- Plugin -->
    <script src="../dist/cdn/toastui-editor-plugin-code-syntax-highlight.js"></script>
    <!-- Prismjs Languages -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-clojure.min.js"></script>
    <script class="code-js">
      const content = [
        '```js',
        `console.log('foo')`,
        '```',
        '```javascript',
        `console.log('bar')`,
        '```',
        '```html',
        '<div id="editor"><span>baz</span></div>',
        '```',
        '```wrong',
        '[1 2 3]',
        '```',
        '```clojure',
        '[1 2 3]',
        '```',
      ].join('\n');

      const { Editor } = toastui;
      const { codeSyntaxHighlight } = Editor.plugin;
      const { Prism } = window;

      const editor = new Editor({
        el: document.querySelector('#editor'),
        previewStyle: 'vertical',
        height: '500px',
        initialValue: content,
        plugins: [[codeSyntaxHighlight, { highlighter: Prism }]],
      });

      const viewer = Editor.factory({
        el: document.querySelector('#viewer'),
        viewer: true,
        height: '500px',
        initialValue: content,
        plugins: [[codeSyntaxHighlight, { highlighter: Prism }]],
      });
    </script>
  </body>
</html>
